import React, {useState, useEffect} from 'react'
import { connect } from 'react-redux'
import { getactorslist } from '@/pages/Home/store/actionCreator'
import {Container} from './style'
import { useNavigate} from 'react-router-dom'
import { CSSTransition } from 'react-transition-group'
import LazyLoad from 'react-lazyload';
import waitImg from '@/assets/wait.gif'

 function Actors(props) {
    const {getactorsDataDispatch } = props
    const {actorslist} = props;
    const [show, setShow] = useState(false);
    const navigate = useNavigate()
    const onBack = () => {
       setShow(false);
       navigate(-1)
    }
    useEffect(() => {
        if(!actorslist.length)  {
            getactorsDataDispatch();
        }
      
        setShow(true)
    },[])
  return (
    <CSSTransition
    in={show}
    timeout={300}
    appear={true}
    classNames="fly"
    unmountOnExit
    onExit={() => {
        onBack()
    }}
    >
    <Container>
        <div className="nav_wrap">
            <nav>
                <span className='navbar-back' onClick={()=> navigate(-1)}></span>
                <div className="navbar-title">演员</div>
                <div className="navbar-btn">
                    <img className="nav-icon" src="https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png"/>
                </div>
            </nav>
        </div>
        <div className='event-list' style={{"paddingTop":"1.5rem"}}>
            { 
           actorslist.map((item) => {
                return (
                <div key={item.id} style={{"margin":"1rem 1rem 0rem"}}>
                    <div className='list'>
                        <LazyLoad placeholder={
                        <img width="100%" height="100%"
                            src={waitImg}
                        />}>
                     <img src = {item.url} style={{"width":"5rem","height":"6rem"}}/>
                    </LazyLoad>
                    <span className='desc'>
                        <p className='text'>{item.type}</p>
                        <p className='detail'>{item.name_a}</p>
                        <p className='detail'>{item.nick}</p>
                    </span>
                    </div>
                </div>
                )
            })
            }
        </div>
    </Container>
   </CSSTransition>
  )
}
const mapStateToProps = (state) => {
    return {
        actorslist:state.Home.actorslist
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getactorsDataDispatch() {
          dispatch(getactorslist())
        },
      }
}
export default connect(mapStateToProps, mapDispatchToProps)(Actors)
